<template>
  <view class="container">

    <view class="avatar">
      <span>微信头像</span>
      <u-upload
        name="product_img"
        :maxCount="1"
        :fileList="filelist"
        width="100"
        height="100"
      
      />
    </view>
    <view class="avatar">
      <span>身份证图片</span>
      <u-upload
        name="product_img"
        :maxCount="2"
        :fileList="filelist1"
        width="100"
        height="100"
      
      />
    </view>
    <view class="content">
      <u-form
        labelPosition="left"
        labelWidth="60"
        :model="buslevel"
        ref="product"
      >
        <!-- 名称 -->
        <u-form-item label="微信昵称" prop="nickname">
          <u-input v-model="buslevel.nickname" disabled />
        </u-form-item>

        <!-- 商品描述 -->
        <u-form-item label="真实名称"  borderBottom>
          <u-input
          disabled
            v-model="buslevel.supplier.realnickname"
            placeholder="真实名称未知"

          />
        </u-form-item>
        <u-form-item label="我的门店"  borderBottom>
          <u-input
          disabled
            v-model="buslevel.supplier.store_text"
            placeholder="加盟门店名称未知"

          />
        </u-form-item>
        <u-form-item label="手机号"  borderBottom>
          <u-input
          disabled
            v-model="buslevel.mobile"
            placeholder="会员折扣不知"

          />
        </u-form-item>
        <u-form-item label="证件号"  borderBottom>
          <u-input
          disabled
            v-model="buslevel.supplier.idcard"
            placeholder="身份证件号未知"

          />
        </u-form-item>
        
        <view class="Box">
          <view
            v-for="(value, key) in buslevel.numlist"
            :key="key"
            class="checkbox-container"
          >
            <checkbox
              @click="changebox({id:value.id,checked:value.checked,num:value.num})"
              class="checkbox"
              
              :checked="JSON.parse(value.checked)"
            ></checkbox>
            <text class="service-name" >{{ value.title }}</text>
            <input
            
              class="service-count"
              disabled="true"
              type="number"
              v-model="value.num"
            />
          </view>
        </view>

        <u-form-item label="有效期" prop="expdate_text">
          <u-input
            v-model="buslevel.expdate_text"
            placeholder="会员有效期未知"
            disabled
          />
        </u-form-item>

     

        <u-button
          text="变为普通用户"
          icon="pushpin"
          size="small"
          type="error"
          :customStyle="btnStyle"
          @click="product"
        />

      </u-form>
    </view>
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>
       <!-- 模态框 -->
       <u-modal
       :show="show"
       :content="content"
       showCancelButton
       @confirm="confirm"
       @cancel="cancel"
     />
  </view>
</template>
  
<script>
export default {
  onLoad(options) {
    console.log(options)
    this.auth = this.$u.auth.check();


    this.busid = options.busid ? options.busid : 0 

    this.list();
  },


  created() {
    this.timer = setInterval(() => {
      let a = this.$u.count.check();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      content: "是否销撤销该卖家角色",
      filelist: [],
      filelist1: [],
      auth: {},
      busid:0,
      show:false,
      thumbs_text: "",
      buslevel: {
        numlist:{}
       
      },
      piclist: [],

     
    }
  },
  methods: {
    product()
    {
      this.show = true
    },
    cancel()
    {
      this.show = false
    },
    async confirm() {
      this.show = false;

      var data = {
        busid: this.busid,
        adminid: this.auth.id,
      };

      var result = await this.$u.api.depot.supplierdestroy(data);
    
      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 2000,
          complete: () => {
            uni.reLaunch({
              url: "/pages/business/business/index",
            });
          },
        });
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
          duration: 2000,
        });
      }
    },
   
    async list() {
      let data = {
        adminid: this.auth.id,
        busid:this.busid
      };
      let result = await this.$u.api.depot.supplierinfo(data);
      if(result.code) {
        this.buslevel = result.data;

        if (this.buslevel.userhead) {
          // 把一维数组循环出来然后组装一个自己想要的结构
          this.filelist = [{ url: this.buslevel.userhead}];
        
        }
        if(this.buslevel.supplier.thumbs_text.length>0)
          {
              this.filelist1 = this.buslevel.supplier.thumbs_text.map((item)=>
              {
                 return {
                  url:item
                 }
              })
          }

       
      } else {
        this.$refs.notice.show({
          type: "warning",
          message: result.msg,
        });
      }
    },
   
  }
}
</script>
  
<style >
.Box {
  display: flex;
  width: 100%;
  flex-wrap:wrap;
}
.checkbox-container {
  display: flex;
  align-items: center;
  margin-bottom:10px;
}

.checkbox {
  margin-left:6px;
}

.service-name {
  /* flex: 1; */
  width: 76px;
  margin-left: 3px;
  font-size: 15px;
}

.service-count {
  width: 25px;
}
.content {
  padding: 20px;
}

.container {
  height: 100%;
  margin: 0 50rpx;
  box-sizing: border-box;
}

.avatar {
  text-align: center;
  /* display: flex; */
  /* align-items: center; */
}

.u-avatar {
  margin: 80rpx auto 40rpx;
}

.xcx {
  width: 200rpx;
  height: 200rpx;
  margin: 80rpx auto 40rpx;
  border-radius: 100%;
  overflow: hidden;
}

.nickname {
  font-size: 14px;
  text-align: center;
}

.name {
  text-align: center;
  margin: 40rpx 0;
  font-size: 14rpx;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}

.vedio .u-upload {
  justify-content: center;
  align-items: center;
  margin: 0.3em auto;
}

.vedio {
  text-align: center;
}

.u-vedio {
  margin: 80rpx auto 40rpx;
}
</style>
  